import './js/import';

// 导入数据
var courseList = require('./data');
// console.log(courseList);


var initCourseTab = (function (doc) {
  var oApp = doc.querySelector('#app');
  var oCourseInput = oApp.querySelector('#course-input');
  var oCourseSearchBtn = oApp.querySelector('#couse-search-btn');
  var oCourseTab = oApp.querySelector('#course-tab');
  var oCourseItems = oApp.querySelectorAll('.cur-tab-item');
  var oCourseList = oApp.querySelector('#course-list');

  // 单个 item 模板
  var oCourseItemTpl = doc.querySelector('#js-course-item-tpl').innerHTML;
  // 没有数据时提示模板
  var oCourseNoDataTpl = doc.querySelector('#js-course-nodata-tpl').innerHTML;

  // 返回一个对象，内部封装操作方法
  return {
    // 当前导航下标
    _curIndex: 0,

    // 定时器对象
    timer: null,

    // 初始化渲染方法
    render() {
      // this._renderLoading();
      // 默认直接加载全部即可
      this._renderList(courseList);
    },

    // 绑定点击事件
    bindClickEvent() {
      oCourseTab.addEventListener('click', initCourseTab._handleClickEvent.bind(this), false);
      oCourseSearchBtn.addEventListener('click', initCourseTab._handleSearchBtnEvent.bind(this), false)
    },

    // 处理导航类型点击事件
    _handleClickEvent(event) {
      var tarNode = event.target;
      var className = tarNode.className.trim();
      // console.log(this);
      // console.log(oCourseItems);
      if (className === 'cur-tab-item') {
        // 1. 先清除选中节点类名
        oCourseItems[this._curIndex].className = 'cur-tab-item';
        // 2. 找到当前点击的节点添加选中类名
        this._curIndex = [].indexOf.call(oCourseItems, tarNode);
        oCourseItems[this._curIndex].className += ' cur-top';
        // 渲染页面
        this._renderList(this._getCurItem());
      }
    },

    // 处理搜索按钮点击事件
    _handleSearchBtnEvent(event) {
      var value = oCourseInput.value;
      var newList = this._getCurItem().filter((item) => {
        // 如果课程名称包含当前输入框内的值，保存，然后组成一个新数组，最后渲染
        return item.courseName.includes(value)
      });
      this._renderList(newList);
    },

    // 获取当前类型数据数组
    _getCurItem() {
      var type = oCourseItems[this._curIndex].dataset.type;
      return courseList.filter((item) => {
        switch (type) {
          case 'all':
            return true;
            break;
          case 'free':
            return item.isFree === 1;
            break;
          case 'vip':
            return item.isFree === 0;
            break;
          default:
            return true;
            break;
        }
      })
    },

    // 根据数据列表渲染页面模板
    _renderList(data) {
      this._renderLoading();
      // 若上次定时器还未结束则清除
      this.timer && clearTimeout(this.timer);

      var list = '';

      data.forEach((item) => {
        list += oCourseItemTpl.replace(/{{(.*?)}}/g, (node, key) => {
          // node：整个匹配规则匹配的出来的字符串
          // key: () 组内的匹配的字符串
          // return item[key.trim()];
          return {
            imgName: require(`./assets/img/${item.imgName}.jfif`),
            courseSection: item.courseSection,
            courseName: item.courseName,
            isFree: item.isFree === 0 ? 'vip' : 'free',
            price: item.isFree === 0 ? `￥${item.price}.00` : '免费',
            courseNum: item.courseNum
          }[key.trim()];
        })
      });

      this.timer = setTimeout(() => {
        oCourseList.innerHTML = list ? list : oCourseNoDataTpl.replace(/{{(.*?)}}/g, (node, key) => {
          return {
            imgName: require('./assets/img/icon-nodata.png'),
            text: '很抱歉，未查找到任何课程数据~'
          }[key.trim()];
        });
      }, 200);

    },

    // 正在加重数据渲染模板
    _renderLoading() {
      oCourseList.innerHTML = `
      <div class="loading">
        <img src="${require('./assets/img/icon-loading.gif')}" alt="">
      </div>`
    }
  }
})(document);


// 这个立即执行函数主要操作整个模块逻辑
; (function (doc) {

  // 1. 先获取需要操作的 dom 节点

  // 2. 初始化方法
  function init() {
    render();
    bindEvent();
  }

  // 渲染方法
  function render() {
    initCourseTab.render();
  }

  // 监听事件
  function bindEvent() {
    initCourseTab.bindClickEvent();
  }

  init();

})(document);